body {
	background-image: url('/ui/css/images/linedpaper.png');
}

#container{

}
div #postitContainer {
	word-break: break-word;
}

#postitContainer p{
	padding: 0px 10px;
	margin-top: 0;
	font-family: 'The Girl Next Door', cursive;
	line-height:120%;
}

#postitYellow {    
  clear:right;
  float:left;
  text-align:center;     
  width: 275px;    
  margin: 50px;    
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: rgb(255,255,136); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

#postitYellow:after {     
   content: "";
  position:absolute;
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}  

#postitPink {    
  clear:right;
  float:left;
  text-align:center;     
  width: 275px;    
  margin: 50px;    
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:60px solid #FE87C2;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: rgba(255,137,196,1); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,137,196,1) 77%, rgba(255,215,235,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,137,196,1)), color-stop(100%,rgba(255,215,235,1) )); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,137,196,1) 77%,rgba(255,215,235,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,137,196,1) 77%,rgba(255,215,235,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,137,196,1) 77%,rgba(255,215,235,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,137,196,1) 77%,rgba(255,215,235,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF89C4', endColorstr='#FF89C4',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

#postitPink:after {     
   content: "";
  position:absolute;
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

#postitBlue {    
  clear:right;
  float:left;
  text-align:center;     
  width: 275px;    
  margin: 50px;    
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:60px solid #87C2FE;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: rgba(137,196,255,1); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(137,196,255,1) 77%, rgba(216,236,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(137,196,255,1)), color-stop(100%,rgba(216,236,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(137,196,255,1) 77%,rgba(216,236,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(137,196,255,1) 77%,rgba(216,236,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(137,196,255,1) 77%,rgba(216,236,255,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(137,196,255,1) 77%,rgba(216,236,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89C4FF', endColorstr='#89C4FF',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

#postitBlue:after {     
   content: "";
  position:absolute;
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

#postitGreen {    
  clear:right;
  float:left;
  text-align:center;     
  width: 275px;    
  margin: 50px;    
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:60px solid #C2FE87;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: rgba(197,255,139,1); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(197,255,139,1) 77%, rgba(237,255,217,1)100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(197,255,139,1)), color-stop(100%,rgba(237,255,217,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(197,255,139,1) 77%,rgba(237,255,217,1)100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(197,255,139,1) 77%,rgba(237,255,217,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(197,255,139,1) 77%,rgba(237,255,217,1)100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(197,255,139,1) 77%,rgba(237,255,217,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5FF8A', endColorstr='#C5FF8A',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

#postitGreen:after {     
   content: "";
  position:absolute;
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

#postitOrange {    
  clear:right;
  float:left;
  text-align:center;     
  width: 275px;    
  margin: 50px;    
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;   
  border:1px solid #E8E8E8;  
  border-top:60px solid #FEC287;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: rgba(255,198,140,1); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,198,140,1) 77%, rgba(255,236,218,1)100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,198,140,1)), color-stop(100%,rgba(255,236,218,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,198,140,1) 77%,rgba(255,236,218,1)100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,198,140,1) 77%,rgba(255,236,218,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,198,140,1) 77%,rgba(255,236,218,1)100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,198,140,1) 77%,rgba(255,236,218,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC58A', endColorstr='#FFC58A',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

#postitOrange:after {     
   content: "";
  position:absolute;
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}
textarea#confessionData {
	color: #666;
	font-size: 14px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 10px;
	height: 75px;
	width: 80%;
	border: #999 1px solid;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

textarea#confessionData:focus {
	color: #000;
	outline: none;
	border: #35a5e5 1px solid;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.submitButton {
	-moz-box-shadow: 3px 4px 0px 0px #1564ad;
	-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
	box-shadow: 3px 4px 0px 0px #1564ad;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
		), color-stop(1, #378de5));
	background: -moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background: -webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background: -o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background: -ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',
		endColorstr='#378de5', GradientType=0);
	background-color: #79bbff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #337bc4;
	display: inline-block;
	color: #000;
	font-family: Georgia;
	font-size: 17px;
	font-weight: bold;
	padding: 12px 44px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #528ecc;
}

.submitButton:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5
		), color-stop(1, #79bbff));
	background: -moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background: -webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background: -o-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background: -ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5',
		endColorstr='#79bbff', GradientType=0);
	background-color: #378de5;
}

.submitButton:active {
	position: relative;
	top: 1px;
}

div#submitConfession {
	padding-top:15px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

div #createConfession a {
    color: #000;
    text-decoration: none;
}

div #confessionTitle {
	text-align:center;
	font-size:20px;
	color:#378de5;
	font-family: 'The Girl Next Door', cursive;
	text-shadow: 1px 1px #2828FF;
}

div #errors {
	width:600px;
	font-size:16px;
	color:#FF0000;
	left:21px;
	position:relative;
}

div #errors ul {
	list-style-type: none;
	text-decoration:none;
}

.inline:hover{
	background: linear-gradient(-45deg, rgba(255,255,60,1) 77%,rgba(255,255,170,1) 100%) ! important;
	border-top: 60px solid #FFFF3C ! important;
	box-shadow: 5px 5px 5px #888;
}


